<template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="apply-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="流程名称" prop="title">
        <el-input v-model="ruleForm.title" />
      </el-form-item>
      <el-form-item label="流程类型" prop="region">
        <el-select v-model="ruleForm.type" placeholder="选择请假类型">
          <el-option label="事假" value="1" />
          <el-option label="调休" value="2" />
          <el-option label="病假" value="3" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="请假时长" prop="count">
        <el-select-v2
          v-model="ruleForm.count"
          placeholder="Activity count"
          :options="options"
        />&nbsp;<label>（单位：小时）</label>
      </el-form-item> -->
      <el-form-item label="开始时间：" class="report_style">
          <el-form-item class="report_input time">
            <el-date-picker
              v-model="ruleForm.startTime"
              type="datetime"
              placeholder="开始时间"
              popper-class="pictime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width:300px;"
            />
          </el-form-item>
        </el-form-item>
        <el-form-item  label="结束时间：" class="report_style">
          <el-form-item class="report_input time">
            <el-date-picker
            v-model="ruleForm.endTime"
              type="datetime"
              placeholder="结束时间"
              popper-class="pictime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width:300px;"
            />
          </el-form-item>
        </el-form-item>
        <!-- <el-form-item label="请假时长" prop="count">
        <el-input v-model="ruleForm.count" type="text" readonly="true"/>
        &nbsp;<label>（单位：小时）</label>
      </el-form-item> -->
   
      <el-form-item label="请假原因" prop="detail">
        <el-input v-model="ruleForm.detail" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import {saveApply} from '@/api/apply'
  
  interface RuleForm {
    //标题
    title: string
    //流程类型
    type: number
    count: number
    startTime: string
    endTime: string
    detail: string,
    start:string,
    end:string
  }

 
  const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
  const formSize = ref('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive({
    title: 'Hello',
    type: 1,
    // count: 3,
    startTime: '',
    endTime: '',
    detail: '',
    // start:'',
    // end:''
  })
  
  const rules = reactive<FormRules<RuleForm>>({
    title: [
      { required: true, message: 'Please input Activity name', trigger: 'blur' },
      { min: 3, max: 25, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    type: [
      {
        required: true,
        message: '请选择类型',
        trigger: 'change',
      },
    ],
    count: [
      {
        required: true,
        message: 'Please select Activity count',
        trigger: 'change',
      },
    ],
    startTime: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a date',
        trigger: 'change',
      },
    ],
    endTime: [
      {
        type: 'date',
        required: true,
        message: 'Please pick a time',
        trigger: 'change',
      },
    ],
    detail: [
      { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        saveApply(ruleForm).then(res => {
            console.log(res,"~~~~~~~~")
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))
  </script>
 <style lang="scss">
.apply-ruleForm {
    width: 50%;
    margin: auto;
    margin-top: 3%;
    .el-input.el-input--default {
    width: 300px;
    }
    .el-textarea.el-input--default {
        width: 300px;
    }
}
</style>
  